* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-size: 16px;
    background-color: #1e222e;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
}

@property --shadow {
    syntax: '<color>';
    initial-value: #fff;
    inherits: false;
}

@property --direc {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

#app {
    width: 25rem;
    height: 30rem;
    /* background-color: black; */
    border-radius: 2rem;
    background: linear-gradient(var(--direc), #5ddcff, #3c67e3 43%, #4e00c2);
    animation: rotate 3s linear infinite;
    position: relative;
    filter: drop-shadow(0 0 0.5rem var(--shadow));
}

#app::after {
    content: '';
    position: absolute;
    inset: 0.5rem;
    background-color: #191c29;
    border-radius: inherit;
}


@keyframes rotate {
    to {
        --direc: 360deg;
        --shadow: #f0f0f0;
    }
}